<template>
	<title-container @more="handleMore" :title="title" :bgColor="ifColumn ? '#fff' : ''" :needMore="false" :isShowTitle="false" :padding="false">
		<view class="tab-position" :style="{top : headerHeight, backgroundColor: ifColumn? '#fff': ''}">
			<tabs :tabData="tabList" v-model="tabSelect" :config="tabConfig"  ></tabs>
		</view>
		<!-- 四宫格 -->
		<swiper 
		:style="{'height': swiperHeight + 'px'}" 
		:current='tabSelect' 
		@change="swiperChange"
		>
			<swiper-item v-for="(list, index) in tabList">
				<view class="mylist" :key="index">
					<view v-if="!ifColumn" class="course-list">
						<course-item class="item" v-for="(courseInfo, itemIndex) in list.courseList" :key="itemIndex" :courseInfo="courseInfo"></course-item>
					</view>
					<!-- 列表横的 -->
					<view v-if="ifColumn" class="container">
						<course-collumn-item v-for="(courseInfo, itemIndex) in list.courseList" :key="itemIndex" :courseInfo="courseInfo"></course-collumn-item>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<load-more v-if="isShowLoding" :status="tabList[tabSelect].lodingType"></load-more>
	</title-container>
</template>

<script>
import titleContainer from '@/components/course/titleContainer'
import courseCollumnItem from '@/components/course/courseCollumnItem.vue'
import courseItem from '@/components/course/courseItem'
import tabs from '@/common/liuyuno-tabs/liuyuno-tabs'
export default {
	data() {
		return {
			fragmentInfo:{},
			tabConfig: {itemWidth: 125},
			tabSelect: 0,
			tabList: [],
			title:'课程频道',
			swiperHeight: 0
		}
	},
	props:{
		headerHeight: {
			type: Number | String,
			default: ''
		},
		ifColumn: Boolean,
		params: {
			type: String,
			default: ''
		},
		isShowLoding: {
			type: Boolean,
			default: false
		}
	},
	components:{
		tabs,
		courseItem,
		titleContainer,
		courseCollumnItem
	},
	created() {
		this.fragmentInfo = JSON.parse(this.params);
		this.init()
	},
	mounted() {
		
	},
	methods:{
		init(){
			if(this.fragmentInfo.displayType == 2){
				this.title = '';
			}
			for (let i = 0; i < this.fragmentInfo.items.length; i++) {
				var tabItem = {
					name:this.fragmentInfo.items[i].title,
					reqParam:{
						spuIdList:[],//课程的spuid列表
						pageNo: 1, //页码
						pageSize: 20, //页数
						courseCategoryIdList: [], //课程分类id列表
						courseLabelList: [], //课程标签id列表
						lodingType:'hide'
					},
					sourceType:this.fragmentInfo.items[i].sourceType,
					sourceValue:this.fragmentInfo.items[i].sourceValue,
					courseList:[],
				}
				this.tabList.push(tabItem);
			}
			this.getCourseList();
		},//获取课程数据
		getCourseList(){
			if(this.tabList[this.tabSelect].lodingType == "end"||this.tabList[this.tabSelect].lodingType == "loding"){
				return
			}
			switch (this.tabList[this.tabSelect].sourceType){
				case '208'://指定课程
				case '118': 
				this.tabList[this.tabSelect].reqParam.idList = this.tabList[this.tabSelect].sourceValue
				this.tabList[this.tabSelect].reqParam.pageSize = 999;//无分页
				this.queryCourseListBySpuIdList();
					break;
				case '209'://课程分类
				case '116': 
				this.tabList[this.tabSelect].reqParam.courseCategoryIdList = this.tabList[this.tabSelect].sourceValue;
				this.queryCourseList();
					break;
				case '210'://课程标签
				case '117': 
				this.tabList[this.tabSelect].reqParam.courseLabelList = this.tabList[this.tabSelect].sourceValue;
				this.queryCourseList();
					break;
				case '211'://企业风采
				this.tabList[this.tabSelect].reqParam.companyCourse = 1;//是否企业课程，0：否，1：是
				this.queryCourseList();
					break;
				default:
					break;
			}
		},//根据spuIpList获取课程数据
		queryCourseListBySpuIdList(){
			this.tabList[this.tabSelect].lodingType = "loding"
			var url = 'product/spu/list';
			this.$request(url,this.tabList[this.tabSelect].reqParam).then(
				data => {
					this.tabList[this.tabSelect].courseList = data.spuList;
					this.$forceUpdate();
					this.tabList[this.tabSelect].lodingType = "end"
					this.getSwiperHeight()
				},
				error => {
					this.tabList[this.tabSelect].lodingType = "end"
				}
			);
		},//课程搜索
		queryCourseList(){
			this.tabList[this.tabSelect].lodingType = "loding"
			var url = 'product/spu/pageCourseSpu';
			this.$request(url,this.tabList[this.tabSelect].reqParam).then(
				data => {
					this.tabList[this.tabSelect].pageNo ++
					if(data.spuList){
						for (let i = 0; i < data.spuList.length; i++) {
							this.tabList[this.tabSelect].courseList.push(data.spuList[i]);
						}
						
						if(this.tabList[this.tabSelect].courseList.length >= data.total){
						    this.tabList[this.tabSelect].lodingType = "end"
						}else{
							this.tabList[this.tabSelect].lodingType = "hide"
						}
						this.$forceUpdate();
						this.getSwiperHeight()
					}else{
						this.tabList[this.tabSelect].lodingType = "hide"
					}
					
				},
				error => {
					this.tabList[this.tabSelect].lodingType = "end"
				}
			);
		},
		swiperChange(e) {
			const nowIndex = e.detail.current
			this.tabChange(nowIndex)
			if (this.tabList[nowIndex].lodingType == "end"||this.tabList[nowIndex].lodingType == "loding") {
				this.getSwiperHeight()
			}
		},
		getSwiperHeight() {
			this.$nextTick(() => {
				this.$utils.getRect('.mylist', true, this).then(tabRect => {
					this.swiperHeight = tabRect[this.tabSelect].height
				})
			})
		},
		tabChange(index) {
			this.tabSelect = index;
			this.getCourseList();
			console.log('---tabChange---');
		},//加载更多
		loadMore(){
			console.log('---loadMore---');
			this.getCourseList();
		}
	}
}
</script>

<style scoped lang="scss">
.course-list{
	margin-top: 10rpx;
	padding: 0 20rpx;
	overflow: hidden;
	.item{
		float: left;
	}
}
.course-list .item:nth-child(2n+1) {
	margin-right: 18rpx;
}
.course-list .item:nth-child(n+3) {
	margin-top: 20rpx;
}
.tab-position{
	position: sticky;
	z-index: 49;
	background-color: #f6f6f6;
}
.dish{
	background-color: #fff;
	margin-top: 20rpx;
	.container{
		padding-top: 19rpx;
	}
	.more{
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #999;
	}
}
</style>
